<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>预览--优客工厂</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
</head>
<body class="childrenBody">
<div id="content"></div>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
    hello();

    function hello() {
        // var type = ["视频", "图片", "视频"];
        // var src = ["http://test45.bj.bcebos.com/2018051815f78c6b1a.mov", "http://urwork.bj.bcebos.com\\20181211142d1ca6b8.jpg", "http://test45.bj.bcebos.com/2018032920baa7b9ba.mp4"];
        // var musicTime = [0, 2000, 0];
        // var musicPath = ["", "http://urwork.bj.bcebos.com\\2018120509148085dd.mp3", ""];
        var type = [], src = [], musicTime = [], musicPath = [];
        var ads = [];

        $.ajax({
            url: "http://localhost:8082/Ad/selectList?token=" + sessionStorage.getItem("token"),
            type: "get",
            success: function (result) {
                if (result.code == 0) {
                    $.each(result.data, function (index, element) {
                        $.each(element.adMaterialVos, function (index, element) {
                            type.push(element.materialType);
                            src.push(element.materialPath);
                            musicTime.push(parseInt(element.displayTime) * 1000);
                            musicPath.push(element.musicPath);
                        });
                    });
                } else {
                    alert("error，" + result.exception);
                }
            }
        });

        setTimeout(function () {
            //初始化
            var index = 0;
            var arr = [];
            for (var i = 0; i < type.length; i++) {
                arr.push([type[i], src[i], musicTime[i], musicPath[i]]);
            }
            init();

            //初始化方法
            function init() {
                listenType(index);
                // 监听视频事件
                $("video").on("timeupdate", function (event) {
                    onTrackedVideoFrame(this.currentTime, this.duration);
                });
            }

            function onTrackedVideoFrame(currentTime, duration) {
                // 当播放时间与视频总时相同时
                if (currentTime == duration) {
                    init();
                }
            }

            function listenType(indexT) {
                if (arr.length == indexT) {
                    hello();
                }
                index++;
                $("#content").html("");
                if (arr[indexT][0] == "图片") {
                    $("#content").append('<img src="' + arr[indexT][1] + '" width="800px" height="450px"><audio src="' + arr[indexT][3] + '" autoplay></audio>');
                    setTimeout(function () {
                        init();
                    }, arr[indexT][2])
                } else if (arr[indexT][0] == "视频") {
                    $("#content").append('<video src="' + arr[indexT][1] + '" controls autoplay width="800px" height="450px"></video>');
                } else if (arr[indexT][0] == "直播") {
                    $("#content").append('<video id="myVideo" controls style="max-width: 800px;max-height: 600px"><source src="' + arr[indexT][1] + '" type="application/x-mpegURL"></video>');
                    videojs('myVideo', {
                        bigPlayButton: false,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        autoplay: true,
                        preload: "auto",
                    });
                }
            }
        }, 1000);
    }
</script>
</body>
</html>